<!--
 * @Author       : 哈喽 1599321283@qq.com
 * @Date         : 2025-03-16 21:38
 * @LastEditors  : 哈喽 1599321283@qq.com
 * @LastEditTime : 2025-03-19 20:32
 * @FilePath     : /练习/aaa/src/views/fortune/bazi.vue
 * @Description  : 八字命盘算命页面
-->
<template>
  <div @click="onSubmit1" class="bazi-container">
    <!-- 页面头部 -->
    <div class="header">
      <h1 class="page-title" >八字命盘</h1>
      <p class="page-subtitle" >揭示您命运的密码，探索生命的轨迹</p>
    </div>

    <!-- 命盘表单 -->
    <div class="form-container">
      <div class="form-card">
        <div class="form-header">
          <div class="mystical-symbol"></div>
          <h2>输入您的信息</h2>
        </div>

        <!-- 表单内容 -->
        <van-form @submit="onSubmit" class="custom-form">
          <!-- 姓名 -->
          <van-cell-group inset class="form-group">
            <van-field
              v-model="formData.name"
              name="name"
              label="姓名"
              placeholder="请输入您的姓名"
              :rules="[{ required: true, message: '请输入姓名' }]"
              input-align="right"
            />
          </van-cell-group>

          <!-- 性别 -->
          <van-cell-group inset class="form-group">
            <van-field name="gender" label="性别" input-align="right" readonly>
              <template #input>
                <van-radio-group
                  v-model="formData.gender"
                  direction="horizontal"
                >
                  <van-radio name="male">男</van-radio>
                  <van-radio name="female">女</van-radio>
                </van-radio-group>
              </template>
            </van-field>
          </van-cell-group>

          <!-- 出生日期 -->
          <van-cell-group inset class="form-group">
            <van-field
              v-model="formData.birthDateText"
              name="birthDate"
              label="出生日期"
              placeholder="请选择出生日期"
              readonly
              input-align="right"
              :rules="[{ required: true, message: '请选择出生日期' }]"
              @click="showDatePicker = true"
            />
          </van-cell-group>

          <!-- 出生时辰 -->
          <van-cell-group inset class="form-group">
            <van-field
              v-model="formData.birthTimeText"
              name="birthTime"
              label="出生时辰"
              placeholder="请选择出生时辰"
              readonly
              input-align="right"
              :rules="[{ required: true, message: '请选择出生时辰' }]"
              @click="showTimePicker = true"
            />
          </van-cell-group>

          <!-- 提交按钮 -->
          <div class="submit-area">
            <van-button
              :loading="submitLoading"
              loading-text="测试中..."
              round
              block
              type="primary"
              native-type="submit"
              class="submit-btn"
            >
              解析命盘
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
    <!-- 日期选择器 -->
    <van-popup v-model:show="showDatePicker" position="bottom" round>
      <van-date-picker
        v-model="formData.birthDate"
        title="选择出生日期"
        :min-date="new Date(1900, 0, 1)"
        :max-date="new Date()"
        @confirm="onDateConfirm"
        @cancel="showDatePicker = false"
      />
    </van-popup>

    <!-- 时辰选择器 -->
    <van-popup v-model:show="showTimePicker" position="bottom" round>
      <van-picker
        :columns="timeColumns"
        @confirm="onTimeConfirm"
        @cancel="showTimePicker = false"
        title="选择出生时辰"
        :default-index="0"
        show-toolbar
      />
    </van-popup>

    <!-- 神秘背景元素 -->
    <div class="mystical-elements">
      <div class="element element-1"></div>
      <div class="element element-2"></div>
      <div class="element element-3"></div>
    </div>
  </div>
</template>

<script setup >
import { ref, reactive, computed } from "vue";
import { useRouter } from "vue-router";
// import { showToast } from "vant";
import { toast } from '@/utils/common';
import axios from "axios";

const router = useRouter();
const currentDate = ref(["2021", "01", "01"]);
const submitLoading = ref(false);
// 表单数据
const formData = reactive({
  name: "",
  gender: "male",
  birthDate: ref(["1996", "01", "01"]),
  birthDateText: "",
  birthTime: "",
  birthTimeText: "",
});

// 选择器显示状态
const showDatePicker = ref(false);
const showTimePicker = ref(false);

// 时辰选项
const timeColumns = [
  { text: "子时 (23:00-01:00)", value: "子时" },
  { text: "丑时 (01:00-03:00)", value: "丑时" },
  { text: "寅时 (03:00-05:00)", value: "寅时" },
  { text: "卯时 (05:00-07:00)", value: "卯时" },
  { text: "辰时 (07:00-09:00)", value: "辰时" },
  { text: "巳时 (09:00-11:00)", value: "巳时" },
  { text: "午时 (11:00-13:00)", value: "午时" },
  { text: "未时 (13:00-15:00)", value: "未时" },
  { text: "申时 (15:00-17:00)", value: "申时" },
  { text: "酉时 (17:00-19:00)", value: "酉时" },
  { text: "戌时 (19:00-21:00)", value: "戌时" },
  { text: "亥时 (21:00-23:00)", value: "亥时" },
];

// 日期确认
const onDateConfirm = (value) => {
  formData.birthDate = value.selectedValues;
  formData.birthDateText = `${value.selectedValues[0]}-${value.selectedValues[1]}-${value.selectedValues[2]}`;
  console.log(formData.birthDateText);
  showDatePicker.value = false;
};

// 时辰确认
const onTimeConfirm = ({ selectedValues, selectedOptions }) => {
  formData.birthTime = selectedValues.join(",");
  formData.birthTimeText = selectedOptions[0].text;
  console.log(formData.birthTime);
  showTimePicker.value = false;
};



const onSubmit1 = async () => {
  // uni.navigateTo({
  //   url: '/pages/views/fortune/result'
  // })
}
// 表单提交
const onSubmit = async () => {
  // 验证所有字段已填写
  if (!formData.name || !formData.birthDateText || !formData.birthTimeText) {
    toast("请填写完整信息");
    return;
  }
  // DeepSeek API配置
  const DEEPSEEK_API_URL = "https://api.deepseek.com/v1/chat/completions";
  const DEEPSEEK_API_KEY = "sk-7d9e0e028e6b43ffac7bc611b6384a95";
  console.log("DEEPSEEK_API_KEY:", DEEPSEEK_API_KEY);
  const systemPrompt = `根据姓名：${formData.name}、性别：${
    formData.gender === "male" ? "男" : "女"
  }、出生日期：${formData.birthDateText}、出生${
    formData.birthTime
  }：这四个信息，测算八字,1，返回内容有：年柱、月柱、日柱、时柱、金木水火土各占的百分百是多少这是处理你返回数据的代码”  baziInfo.pillars = [
    { name: "年柱", heavenly: aiResponse[0]['年柱'][0], earthly: aiResponse[0]['年柱'][1] },
    { name: "月柱", heavenly: aiResponse[0]['月柱'][0], earthly: aiResponse[0]['月柱'][1] },
    { name: "日柱", heavenly: aiResponse[0]['日柱'][0], earthly: aiResponse[0]['日柱'][1] },
    { name: "时柱", heavenly: aiResponse[0]['时柱'][0], earthly: aiResponse[0]['时柱'][1] }
  ];

  // 根据八字计算五行分布
  // 这里使用模拟数据，实际应用中需要根据八字计算五行的分布情况
  baziInfo.fiveElements = [
    { name: "金", value: aiResponse[0]['五行分布']['金'], color: "#FFD700" },
    { name: "木", value: aiResponse[0]['五行分布']['木'], color: "#4CAF50" },
    { name: "水", value: aiResponse[0]['五行分布']['水'], color: "#2196F3" },
    { name: "火", value: aiResponse[0]['五行分布']['火'], color: "#FF5722" },
    { name: "土", value: aiResponse[0]['五行分布']['土'], color: "#795548" }
  ];“，根据这个来返回你的数据其中aiResponse就是你返回的数据。2，返回性格优势、潜在弱点、事业发展、财富状况、感情状况、健康提示 数据，返回格式为{性格优势:"xxxx",....}。只返回数据不要有多余的任何输出内容`;

  try {
    submitLoading.value = true;
    const response = await axios.post(
      DEEPSEEK_API_URL,
      {
        model: "deepseek-chat",
        messages: [
          { role: "system", content: systemPrompt },
          // { role: "user", content: "请生成本月运势报告" }
        ],
        temperature: 0.7,
        max_tokens: 1000,
      },
      {
        headers: {
          Authorization: `Bearer ${DEEPSEEK_API_KEY}`,
          "Content-Type": "application/json",
        },
      }
    );
    submitLoading.value = false;
    console.log('LLLLLL',response)
    const aiResponse = response.data.choices[0].message.content;
    // 正则表达式（含说明）
    // const regex = /```json\s*([\s\S]*?)\s*```/i;

    // 使用示例
    // const match = aiResponse.match(regex);
    // console.log('MMMMMMM',match);
    // const resultArray = match ? [JSON.parse(match[1])] : [];
    // console.log(resultArray);
    // console.log(resultArray);
    // 输出结果
    // console.log("AI response:", aiResponse);
    // console.log(resultArray);
    // try {
    //   const { data } = await axios.post('https://api.deepseek.com/bazi-analysis', {
    //     name: formData.name,
    //     gender: formData.gender === 'male' ? '男' : '女',
    //     birth_date: formData.birthDateText,
    //     birth_hour: formData.birthTimeText.replace(/\(.*?\)/g, '') // 去除时辰括号内的时间
    //   });

    // 跳转到结果页，并传递分析结果

    uni.navigateTo({
      url: '/pages/views/fortune/result?type=bazi'+'&name='+formData.name+'&gender='
          +formData.gender +'&birthDate='+formData.birthDateText+'&birthTime='+formData.birthTimeText+'&aiResponse='+aiResponse ,

    })

    // router.push({
    //   name: "FortuneResult",
    //   query: {
    //     type: "bazi",
    //     name: formData.name,
    //     gender: formData.gender,
    //     birthDate: formData.birthDateText,
    //     birthTime: formData.birthTimeText,
    //     aiResponse: JSON.stringify(resultArray),
    //   },
    // });
  } catch (error) {
    toast("命盘解析失败，请稍后重试");
    submitLoading.value = false;
    console.error("API请求失败:", error);
  }
};
</script>

<style lang="less" scoped>
.bazi-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;
  color: #fff;
}

// 页面头部
.header {
  text-align: center;
  padding: 20px 0;
  position: relative;
  z-index: 0;

  .page-title {
    font-size: 28px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, #a78bfa 0%, #8b5cf6 50%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }

  .page-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
  }
}

// 表单容器
.form-container {
  max-width: 500px;
  margin: 20px auto 40px;
  position: relative;
  z-index: 10;
}

// 表单卡片
.form-card {
  background: rgba(30, 27, 75, 0.7);
  border-radius: 16px;
  padding: 30px 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);

  // 表单头部
  .form-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;

    h2 {
      margin-top: 15px;
      margin-bottom: 0;
      font-size: 20px;
      color: #c4b5fd;
      text-shadow: 0 0 10px rgba(196, 181, 253, 0.3);
    }

    // 神秘符号
    .mystical-symbol {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: conic-gradient(
        from 0deg,
        #7c3aed,
        #8b5cf6,
        #a78bfa,
        #8b5cf6,
        #7c3aed
      );
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      &::before,
      &::after {
        content: "";
        position: absolute;
        border-radius: 50%;
      }

      &::before {
        width: 70%;
        height: 70%;
        background: rgba(30, 27, 75, 0.8);
      }

      &::after {
        width: 40%;
        height: 40%;
        background: #a78bfa;
        box-shadow: 0 0 15px #a78bfa;
      }
    }
  }
}
// 自定义表单样式
.custom-form {
  .form-group {
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
  }

  // 修改表单控件颜色
  :deep(.van-cell) {
    background: rgba(67, 56, 202, 0.1);
    color: #8b5cf6;
    padding: 16px;
    --van-field-placeholder-text-color: #fff;

    &::after {
      display: none;
    }

    .van-field__label {
      color: #8b5cf6; // 这里已被修改
    }

    .van-field__control {
      color: #8b5cf6; // 这里已被修改
    }
  }

  :deep(.van-radio) {
    margin-right: 20px;

    .van-radio__icon--checked .van-icon {
      background-color: #8b5cf6;
      border-color: #8b5cf6;
    }

    .van-radio__label {
      color: #8b5cf6; // 这里已被修改
    }
  }
}

// 提交区域
.submit-area {
  margin-top: 30px;
  padding: 0 10px;

  .submit-btn {
    height: 50px;
    font-size: 16px;
    font-weight: 500;
    background: linear-gradient(90deg, #7c3aed 0%, #8b5cf6 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    &:active {
      transform: translateY(2px);
      box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
    }
  }
}

// 自定义弹出层样式
:deep(.van-popup) {
  // background: rgba(30, 27, 75, 0.95);

  .van-datetime-picker,
  .van-picker {
    color: #7c3aed;
    // background: transparent;

    .van-picker-column__item {
      // color: rgba(255, 255, 255, 0.7);

      &--selected {
        color: #7c3aed;
        font-weight: 600;
      }
    }

    .van-picker__toolbar {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .van-picker__title {
        color: #7c3aed;
      }

      .van-picker__confirm,
      .van-picker__cancel {
        color: #7c3aed;
      }
    }
  }
}

// 神秘背景元素
.mystical-elements {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;

  .element {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.3;
  }

  .element-1 {
    width: 200px;
    height: 200px;
    background: #7c3aed;
    top: -50px;
    right: -50px;
    animation: float-1 15s ease-in-out infinite alternate;
  }

  .element-2 {
    width: 300px;
    height: 300px;
    background: #4c1d95;
    bottom: -100px;
    left: -100px;
    animation: float-2 20s ease-in-out infinite alternate;
  }

  .element-3 {
    width: 150px;
    height: 150px;
    background: #8b5cf6;
    top: 40%;
    right: 10%;
    animation: float-3 12s ease-in-out infinite alternate;
  }
}

@keyframes float-1 {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(20px) scale(1.1);
  }
}

@keyframes float-2 {
  0% {
    transform: translateX(0) scale(1);
  }
  100% {
    transform: translateX(30px) scale(1.15);
  }
}

@keyframes float-3 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-20px, 15px) scale(0.9);
  }
}

// 响应式调整
@media (max-width: 480px) {
  .form-card {
    padding: 20px 10px;
  }

  .header .page-title {
    font-size: 24px;
  }
}
</style>